<template>
  <div
    class="flex w-full right-user-info"
    style="width: 296px; height 100%; padding: 16px; border-left: 1px solid var(--color-border-default)"
  >
    <!-- 客户的头像+ 昵称 -->
    <div style="display: inline-flex; align-items: center; padding-bottom: 10px">
      <el-avatar :size="42" shape="circle" :src="circleUrl">
        <img :src="circleUrl" />
      </el-avatar>

      <div
        style="
          font-family: Source Han Sans, Source Han Sans;
          font-weight: bold;
          margin-left: 10px;
          font-size: 16px;
          width: 150px;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        "
      >
        {{ customerInfo.username || "--" }}
      </div>
    </div>

    <!-- tab -->
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      :class="{ 'opacity-0': arrowRight }"
      @tab-click="handleClick"
    >
      <el-tab-pane label="访问" name="0"></el-tab-pane>
      <el-tab-pane label="名片" name="1"></el-tab-pane>
      <el-tab-pane label="跟进记录" name="2"></el-tab-pane>
    </el-tabs>

    <!-- 访问来源 -->
    <!-- 名片 -->

    <div class="business-card" v-if="activeName == '1'">
      <el-form
        ref="form"
        :model="customerInfo"
        @change="saveCustomerInfos"
        label-position="top"
        :rules="rules"
      >
        <el-form-item label="电话">
          <!--          <el-input-->
          <!--            v-model="customerInfo.mobile"-->
          <!--            show-word-limit-->
          <!--            maxlength="11"-->
          <!--            type="text"-->
          <!--          ></el-input>-->
        </el-form-item>
        <el-form-item label="QQ">
          <!--          <el-input v-model="customerInfo.qq" type="text"></el-input>-->
        </el-form-item>
        <el-form-item label="微信">
          <!--          <el-input v-model="customerInfo.wechat" type="text"></el-input>-->
        </el-form-item>
        <el-form-item label="地址" props="address">
          <!--          <el-input v-model="customerInfo.address" type="textarea"></el-input>-->
        </el-form-item>
        <el-form-item label="邮箱">
          <!--          <el-input v-model="customerInfo.email" type="text"></el-input>-->
        </el-form-item>
        <el-form-item label="联系人">
          <!--          <el-input v-model="customerInfo.contact" type="text"></el-input>-->
        </el-form-item>
        <el-form-item label="备注">
          <!--          <el-input v-model="customerInfo.remark" type="textarea"></el-input>-->
        </el-form-item>
        <el-form-item label="访问标识">
          <el-input v-model="customerInfo.id" disabled type="text"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 跟进记录 -->
  </div>
</template>

<script setup>
import { useGetters, useState } from "@/utils/hooks/useMapper";
import emitter from "@/utils/mitt-bus";
import { useEventListener } from "@vueuse/core";
import { circleUrl } from "./utils/menu";
import {
  onActivated,
  onDeactivated,
  onMounted,
  onUnmounted,
  ref,
  watchEffect,
  getCurrentInstance,
} from "vue";
import { useStore } from "vuex";
import { dragControllerDiv, isallStaff } from "./utils/utils";
import { getCustomerInfo, completeUserInfo } from "@/api/node-admin-api/role";
import { watch } from "vue";

const props = defineProps({
  userid: {
    type: String,
    default: "",
    required: true,
  },
});

const isCollapse = ref(false);

const { dispatch, commit } = useStore();
const { emit } = getCurrentInstance();
const activeName = ref("1");
const customerInfo = ref({});

const { isGroupChat } = useGetters(["isGroupChat"]);
const rules = {
  address: [
    {
      pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
};

const handleClick = (val) => {
  activeName.value = val;
};

const getCustomerInfos = (newValue) => {
  if (!props.userid) return;
  getCustomerInfo({ userid: props.userid }).then((response) => {
    const { code, message, data } = response;
    if (code === 20000) {
      customerInfo.value = { ...data.userInfo };
    }
  });
};

// watch(
//   () => props.userid,
//   (newValue, oldValue) => {
//     console.log(newValue, oldValue);
//     getCustomerInfos(newValue);
//   }
// );

const saveCustomerInfos = () => {
  const params = {
    ...customerInfo.value,
    userId: customerInfo.value.id,
  };
  completeUserInfo(params).then((response) => {
    if (response.code === 20000) {
      getCustomerInfos();
    }
  });
};

onActivated(() => {});
onDeactivated(() => {});
onMounted(() => {
  getCustomerInfos();
});
defineExpose({});
onUnmounted(() => {});
watchEffect(() => {});
</script>

<style lang="scss" scoped>
.right-user-info {
  display: flex;
  flex-direction: column;
  .business-card {
    height: calc(100% - 200px);
    :deep(.el-form-item .el-form-item__label) {
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 14px;
      color: #606266;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .label {
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 400;
      font-size: 14px;
      color: #555555;
      line-height: 12px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      width: 70px;
      padding: 10px 0;
    }

    .value {
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 400;
      font-size: 14px;
      color: #555555;
      line-height: 12px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}
</style>
